<template>
  <div>
    <tabar></tabar>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { reactive, onMounted, onBeforeMount } from "vue";

import { useStore } from "@/store/index.js";
const store = useStore();
import { useMqtt } from "@/hooks/useMqtt";
const { isConnected, publish, subscribe } = useMqtt(
  "ws://121.36.203.95:8083/mqtt"
  // "ws://51dldz.xyz:8083/mqtt"
);
import tabar from "./components/tabar.vue";

let topic = [
  "zhongmi/000009/rx",
  "videoTopic",
  "zhongmi/000006/rx",
  "zhongmi/000004/rx",
  "zhongmi/000008/rx",
  "zhongmi/000007/rx",
  "zhongmi/000010/rx",
];
let data = reactive({});
async function getMqtt() {
  // let obj = {};
  let data = await getMessage();
  store.setMqttData(data);
}
function getMessage() {
  return new Promise((resolve, reject) => {
    subscribe(topic, (topicMqtt, message) => {
      data[topicMqtt] = message;
      // data = obj;
      console.log(data, "data");
      store.setMqttData(data);
      // store.msg = data;
      resolve(data);
    });
  });
}

onBeforeMount(() => {
  getMqtt();
});
</script>
<style scoped>
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.tabar {
  pointer-events: none;
  z-index: 999;
}
</style>
